<template>
	<view class="article-item" @click="navTo(`/pages/article/details?id=${item.id}`)">
		<!-- 文章列表     row是一行显示  column是垂直显示 text-ellipsis内容超出显示两行  flex 布局全局样式-->   
		<view class="article-content row">  
			<view class="left-text column">
				<text class="title text-ellipsis">{{item.title}}</text>
				<!-- summary  样式中有一个   -webkit-line-clamp:1;//最多显示1行    可以替换掉原来的样式 -->
				<text class="summary text-ellipsis">{{item.summary}}</text>
			</view>
			<view class="right-image" v-if="item.imageUrl">
				<!-- lazy-load vue的懒加载 -->
				<image :src="item.imageUrl" lazy-load  mode=""></image>
			</view>
		</view>
		<view class="article-info">
			<text> {{item.nickName}}</text>
			<!-- $util.dateFormat（）  全局方法  -->
			<text>{{$util.dateFormat(item.updateDate)}}</text>
			<text> {{item.thumhup}}</text>
		</view>
	</view>
</template>

<script>
	export default  {
		props:{
			item:{
				type:Object,
				default:()=>({
					id: 10,
					userId: 1,
					nickName: "叶涛",
					title: "子作月状温意研也越变美教。",
					summary: "主权也是对细况该还存难回经养决调风成使强展象多构定织角军土号次别指道步时少度别细才级别象已利应线直长南深万格今数专引传保数物商区三何政传又理必具号圆小必省者。",
					imageUrl: "https://img9.51tietu.net/pic/2019-091404/sbeilxvdfejsbeilxvdfej.jpg",
					viewCount: 99571,
					thumhup: 32370,
					updateDate: "1991-10-14 12:24:41"
				})
			}
		},
		
		created(){
			// console.log(this.item,'item')
		}
	}
</script>

<style lang="scss">
	
	.article-item{
		padding:30rpx;
		border-bottom: 1rpx solid  #f1f1f1;
		
		.article-content{
			.left-text{
				.title{  //标题头部字体color
					font-size: 30rpx;
					font-weight: bold;
				}
				.summary{    //内容样式
					padding-top: 5rpx;
					font-size: 26rpx;
					color: #999;
					// -webkit-line-clamp:1;//最多显示1行  
				}
			}
			.right-image{
				min-width: 220rpx;
				margin-left: 15rpx;
				image{
					width:220rpx;
					height:140rpx;
					border-radius: 10rpx;
					
				}
			}
		}
		.article-info{
			padding-top: 15rpx;
			text{
				font-size: 26rpx;
				color:#999;
				padding-right: 10rpx;
				&:first-child{//这是找他头元素的选择器
					color:#222222 ;
				}
			}
		}
	}
</style>
